<template>
  <div>
    <x-header></x-header>
    <div class="x-live J-pos1">
      <x-banner :image="xliveImage"></x-banner>
      <div class="section section-1">
        <c-page-header title="LIVE IN CHINA" subtitle="Characteristic teaching"></c-page-header>

        <transition name="fade-in">
          <div class="card" v-if="transObject.showTeach">
            <div class="card--header">
              <x-more-tag text="teaching"></x-more-tag>
              <p class="card--desc">Sand painting has a unique charm of performance, can make the audience into the fantastic feeling and hitherto unknown visual enjoyment. Sand painting is enjoyable, natural, full of natural beauty, and, a fall, Yima, a hook, a pick, a beat. Practices are very expressive and appealing.</p>
            </div>

            <div class="swiper-teach__wrap">
              <swiper class="swiper-live" :options="swiperOption" ref="teachSwiper">
                <swiper-slide>
                  <div class="swiper-slide">
                    <img class="slide-item__img" src="../assets/live/section_cover_1.jpg" alt="">
                    <p class="slide-item__text">Sand painting has a unique charm of performance, can make the audience into the fantastic feeling and hitherto unknown visual enjoyment. </p>
                  </div>
                </swiper-slide>
                <swiper-slide>
                  <div class="swiper-slide">
                    <img class="slide-item__img" src="../assets/live/section_cover_1.jpg" alt="">
                    <p class="slide-item__text">Sand painting has a unique charm of performance. </p>
                  </div>
                </swiper-slide>
              </swiper>

              <div class="swiper-operate__wrap">
                <c-swiper-pointer :onPrev="onTeachPrev" :onNext="onTeachNext"
                  prevClass="swiper--teach-operate swiper--teach-operate__prev"
                  nextClass="swiper--teach-operate swiper--teach-operate__next"></c-swiper-pointer>
              </div>
            </div>
          </div>
        </transition>
      </div>

      <div class="J-pos2">
        <transition name="fade-in">
          <div class="section section-2" v-if="transObject.showLive">
            <div class="item__1 clearfix">
              <div class="item--desc">
                <h2 class="item--desc__title">China Living</h2>
                <x-more-tag text="teaching"></x-more-tag>
                <p class="item--desc__text">Sand painting has a unique charm of performance, can make the audience into the fantastic feeling and hitherto unknown visual enjoyment. Sand painting is enjoyable, natural, full of natural beauty, and, a fall, Yima, a hook, a pick, a beat. Practices are very expressive and appealing.</p>
              </div>

              <div class="swiper-live__wrap">
                <swiper class="swiper-live" :options="swiperOption" ref="liveSwiper">
                  <swiper-slide>
                    <div class="item--cover">
                      <img class="item--cover__img" src="../assets/live/section_cover_2.jpg" alt="Teaching">
                    </div>
                  </swiper-slide>
                  <swiper-slide>
                    <div class="item--cover">
                      <img class="item--cover__img" src="../assets/live/section_cover_2.jpg" alt="Teaching">
                    </div>
                  </swiper-slide>
                  <swiper-slide>
                    <div class="item--cover">
                      <img class="item--cover__img" src="../assets/live/section_cover_2.jpg" alt="Teaching">
                    </div>
                  </swiper-slide>
                </swiper>
              </div>
            </div>

            <div class="item__2 clearfix">
              <div class="slide clearfix">
                <div :class="getSlideItemClass(0)" @click="onLiveDot(0)">
                  <img class="slide-item__img" src="../assets/live/section_items_1.jpg" alt="1">
                  <div class="slide-item__desc">
                    <p class="lv1">Sand painting has </p>
                    <p class="lv2">SPORTS</p>
                    <p class="lv3">TEACHING</p>
                  </div>
                </div>
                <div :class="getSlideItemClass(1)" @click="onLiveDot(1)">
                  <img class="slide-item__img" src="../assets/live/section_items_2.jpg" alt="1">
                  <div class="slide-item__desc">
                    <p class="lv1">Sand painting has </p>
                    <p class="lv2">SPORTS</p>
                    <p class="lv3">TEACHING</p>
                  </div>
                </div>
                <div :class="getSlideItemClass(2)" @click="onLiveDot(2)">
                  <img class="slide-item__img" src="../assets/live/section_items_3.jpg" alt="1">
                  <div class="slide-item__desc">
                    <p class="lv1">Sand painting has </p>
                    <p class="lv2">SPORTS</p>
                    <p class="lv3">TEACHING</p>
                  </div>
                </div>

                <div class="swiper-operate__wrap">
                  <c-swiper-pointer :onPrev="onLivePrev" :onNext="onLiveNext"
                    prevClass="swiper--live-operate swiper--live-operate__prev"
                    nextClass="swiper--live-operate swiper--live-operate__next"></c-swiper-pointer>
                </div>
              </div>
            </div>
          </div>
        </transition>
      </div>

      <div class="J-pos3">
        <transition name="fade-in">
          <div class="section section-3" v-if="transObject.showStudy">
            <div class="card">
              <div class="card--header">
                <h3 class="card--title">Chinese study</h3>
                <x-more-tag text="at china"></x-more-tag>
                <p class="card--desc">Sand painting has a unique charm of performance, can make the audience into the fantastic feeling and hitherto unknown visual enjoyment. Sand painting is enjoyable, natural, full of natural beauty, and, a fall, Yima, a hook, a pick, a beat. Practices are very expressive and appealing.</p>
              </div>
            </div>

            <div class="swiper-study__wrap">
              <swiper class="swiper-study" :options="swiperOption" ref="studySwiper">
                <swiper-slide>
                  <div class="swiper-slide">
                    <img class="slide-item__img" src="../assets/live/section_3_slide_1.jpg" alt="">
                    <p class="slide-item__text">Sand painting has a unique charm of performance, can make the audience into the fantastic feeling and hitherto unknown visual enjoyment. </p>
                  </div>
                </swiper-slide>
                <swiper-slide>
                  <div class="swiper-slide">
                    <img class="slide-item__img" src="../assets/live/section_3_slide_1.jpg" alt="">
                    <p class="slide-item__text">Sand painting has a unique charm of performance. </p>
                  </div>
                </swiper-slide>
              </swiper>
              <div class="swiper-operate__wrap">
                <c-swiper-pointer :onPrev="onStudyPrev" :onNext="onStudyNext"
                  prevClass="swiper--major-operate swiper--major-operate__prev"
                  nextClass="swiper--major-operate swiper--major-operate__next"
                  ></c-swiper-pointer>
              </div>
            </div>
          </div>
        </transition>
      </div>

      <div class="c-path" v-if="transObject.showPath">
        <div :class="{'c-path--dot': true, active: item.active}"
          v-for="(item, index) in path"
          @click="toPath(item, index)">
          <span class="normal">
            <span class="text">{{ item.text }}</span>
            <i class="normal-icon"></i>
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import XHeader from '@/components/XHeader'
  import XBanner from '@/components/XBanner'
  import XMoreTag from '@/components/XMoreTag'
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  import CPageHeader from '@/components/CPageHeader'
  import CSwiperPointer from '@/components/CSwiperPointer'
  import $ from 'jquery'
  import { swiperDefaultConfig } from '../config/swiper.config'

  const $window = $(window)

  export default {
    components: {
      swiper,
      swiperSlide,
      CPageHeader,
      CSwiperPointer,
      XHeader,
      XMoreTag,
      XBanner
    },
    data() {
      return {
        path: [{
          active: true,
          text: 'arts china',
        }, {
          active: false,
          text: 'sports',
        }, {
          active: false,
          text: 'major clients',
        }],
        liveDotActive: [false, false, false],
        transObject: {
          showPath: false,
          showTeach: false,
          showLive: false,
          showStudy: false,
        },
        xliveImage: require('../assets/banner/xlive.jpg'),
        swiperOption: $.extend({}, swiperDefaultConfig, {
          autoplay: 2000,
        }),
      }
    },
    computed: {
      teachSwiper() {
        return this.$refs.teachSwiper.swiper
      },
      liveSwiper() {
        return this.$refs.liveSwiper.swiper
      },
      studySwiper() {
        return this.$refs.studySwiper.swiper
      }
    },
    mounted() {
      this.onShowTeach()
      this.onShow()
      $window.on('scroll.section', (e) => {
        this.onShow()
      })

      // 锚点
      $window.on('scroll.path', e => {
        const top = $window.scrollTop();
        if(top > 375) {
          this.transObject.showPath = true
        } else {
          this.transObject.showPath = false
        }
      })
    },
    destroyed() {
      $window.off('scroll.section')
      $window.off('scroll.path')
    },
    methods: {
      getSlideItemClass(index) {
        const { liveDotActive } = this;

        return {
          'slide-item': true,
          active: liveDotActive[index]
        }
      },
      getScrollTop() {
        return $window.scrollTop()
      },
      onShow() {
        this.onShowLive()
        this.onShowStudy()
      },
      onShowTeach() {
        this.transObject.showTeach = true
      },
      onShowLive() {
        const top = this.getScrollTop()
        if(top >= 500) {
          this.transObject.showLive = true
        }
      },
      onShowStudy() {
        const top = this.getScrollTop()
        if(top >= 1300) {
          this.transObject.showStudy = true
          $window.off('scroll.section')
        }
      },
      onLiveDot(index) {
        this.liveSwiper.slideTo(index)
      },
      onTeachPrev() {
        this.teachSwiper.slidePrev()
      },
      onTeachNext() {
        this.teachSwiper.slidePrev()
      },
      onLivePrev() {
        this.liveSwiper.slidePrev()
      },
      onLiveNext() {
        this.liveSwiper.slideNext()
      },
      onStudyPrev() {
        this.studySwiper.slidePrev()
      },
      onStudyNext() {
        this.studySwiper.slideNext()
      },
      toPath(item, index) {
        let top = 0;

        switch(index) {
          case 0:
            top = this.getPathTop( $('.J-pos1') )
            break;
          case 1:
            top = this.getPathTop( $('.J-pos2') )
            break;
          case 2:
            top = this.getPathTop( $('.J-pos3') )
            break;
          default:
            top = this.getPathTop( $('.J-pos1') )
            break;
        }

        this.path.map((p, i) => {
          p.active = i === +index
          return p
        });

        $('html, body').stop(true, true).animate({
          scrollTop: top
        })
      },
      getPathTop($el) {
        // todo cache pos
        const offset = $el.offset()
        const top = offset.top

        return top
      },
    }
  }
</script>

<style lang="scss" scoped>
  .x-live {
    .c-path {
      &::after {
        height: 34px * 2;
      }
    }
  }

  .card {
    background: #fff;
  }
  .card--header {
    padding: 36px 110px 22px 60px;
  }
  .card--title {
    float: left;
    font-size: 83px;
    font-weight: 700;
  }
  .card--desc {
    margin-top: 15px;
    line-height: 22px;
  }

  .slide-item__img {
    max-width: 100%;
    height: auto;
    display: block;
  }
  .slide-item__text {
    font-size: 14px;
    color: #515151;
    line-height: 106px;
    padding-left: 42px;
    background: #fff;
  }

  .section-1 {
    max-width: 1372px;
    margin: 0 auto 148px;
    margin-top: -326px;
    font-family: Montserrat;

    .card {
      box-shadow: 0 36px 128px rgba(0,0,0,.3);
    }
  }

  .section-2 {
    max-width: 1371px;
    margin: 0 auto;
    .swiper-live__wrap {
      float: right;
      width: 942px;
      box-sizing: border-box;
      box-shadow: 0 20px 25px 10px rgba(0, 0, 0, .15)
    }
    .item__1 {
      .item--cover {
        float: right;
        width: 100%;
        padding: 5px;
        background: #fff;
        box-sizing: border-box;
      }
      .item--cover__img {
        max-width: 100%;
        height: auto;
      }
      .item--desc {
        text-align: right;
        float: left;
        width: 500px;
        margin-left: -102px;
      }
      .item--desc__title {
        font-size: 83px;
        color: #231815;
        font-family: Montserrat;
      }
      .item--desc__text {
        font-size: 14px;
        color: #515151;
        margin-top: 24px;
        width: 390px;
        display: inline-block;
      }
    }
    .item__2 {
      position: relative;
      top: -166px;
      z-index: 10;
      .slide {
        display: inline-block;
        margin-left: 36px;
        box-shadow: 0 15px 30px 10px rgba(0,0,0,.2);

        .swiper-operate__wrap {
          position: absolute;
          top: 270px;
          left: 730px;
        }
      }
      .slide-item {
        cursor: pointer;
        float: left;
        position: relative;
        border: 6px #fff solid;
        margin-left: -6px;
        &:first-child {
          margin-left: 0;
        }
        &::after {
          display: block;
          content: '\20';
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          background: rgba(0, 0, 0, 0.4);

          opacity: 0;
          transition: opacity .3s;
        }
        &.active,
        &:hover {
          .slide-item__desc,
          &::after {
            opacity: 1;
            transition: opacity .3s;
          }
        }
      }
      .slide-item__desc {
        position: absolute;
        left: 12px;
        bottom: 14px;
        color: #fff;
        font-family: MontserratAlternates;
        font-weight: 700;
        opacity: 0;
        transition: opacity .3s;
        z-index: 1;
        .lv1 {
          font-size: 12px;
        }
        .lv2 {
          font-size: 37px;
          line-height: 1.2;
        }
        .lv3 {
          font-size: 18px;
        }
      }
    }
  }

  .section-3 {
    max-width: 1371px;
    margin: 0 auto 108px;
    box-shadow: 0 36px 128px rgba(0, 0, 0, 0.3);

    .card--desc {
      clear: left;
    }
    .x-more-tag {
      margin: 50px 0 0 16px;
    }
  }

  .swiper-study__wrap,
  .swiper-teach__wrap {
    position: relative;
    .swiper-operate__wrap {
      position: absolute;
      bottom: 30px;
      right: 36px;
      z-index: 1;
    }
  }

  .fade-in-enter-active,
  .fade-in-leave {
    opacity: 1;
    transition: all 2s;
  }
  .fade-in-enter,
  .fade-in-leave-active {
    opacity: 0;
    transition: all 2s;
  }

  @media only screen and (max-width: 1661px) {
    .section-2 {
      .item__1 {
        .item--desc {
          width: 40%;
        }
        .item--desc__title {
          font-size: 72px;
        }
      }
      .swiper-live__wrap {
        width: 65%;
      }
    }
  }
  @media only screen and (max-width: 1661px) {
    .section-2 {
      .item__1 {
        .item--desc {
          width: 40%;
        }
        .item--desc__title {
          font-size: 68px;
        }
      }
    }
  }
</style>
